const WebpackHtmlPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin;
const MinExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const path = require("path");
module.exports = {
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css/,
        use: [MinExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  entry: {
    main: path.resolve(__dirname, "./src/index.js"),
    detail: path.resolve(__dirname, "./src/detail.js"),
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        styles: {
          test: /\.css$/, // 匹配样式模块
          minSize: 0, // 覆盖默认的最小尺寸，这里仅仅是作为测试
          minChunks: 2, // 覆盖默认的最小chunk引用数
        },
      },
    },
  },
  plugins: [
    new WebpackHtmlPlugin({
      template: path.resolve(__dirname, "public/detail.html"),
      chunks: ["detail"],
      filename: "detail.html",
    }),
    new WebpackHtmlPlugin({
      template: path.resolve(__dirname, "public/index.html"),
      chunks: ["main"],
      filename: "index.html",
    }),
    new MinExtractPlugin({
      filename: "[name].[hash:5].css",
      chunkFilename: "common.[hash:5].css",
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
    }),
    new CleanWebpackPlugin(),
  ],
};
